<template>
	<view class="content">
		<image :src="buildInfo.thumb" mode="widthFix"></image>

		<view class="header header-more">
			<view class="horizontal">
				<view class="line"></view>
				<view class="header-title">基本信息</view>
			</view>
			<image class="share-image" src="@/static/share.png" mode="widthFix"></image>
		</view>
		<view class="info-list">
			<view class="info-item">
				<text class="info-item-name">地&emsp;&emsp;区</text>
				<text class="info-item-value">{{buildInfo.area.name}}</text>
			</view>
			<view class="info-item">
				<text class="info-item-name">楼盘名称</text>
				<text class="info-item-value">{{buildInfo.name}}</text>
			</view>
			<view class="info-item">
				<text class="info-item-name">户&emsp;&emsp;型</text>
				<text class="info-item-value">{{buildInfo.model.name}}</text>
			</view>
		</view>
		<view class="header">
			<view class="line"></view>
			<view class="header-title">地理位置</view>
		</view>
		<view class="map-container"><map :latitude="buildInfo.latitude" :longitude="buildInfo.longitude"></map></view>
		<view class="header">
			<view class="line"></view>
			<view class="header-title">案例展示</view>
		</view>
		<view class="list">
			<view class="item" @click="openDetailsSample">
				<view>
					<image :src="buildInfo.imgs[0]" mode="widthFix"></image>
					<view class="item-range">{{buildInfo.model.name}}</view>
				</view>
			</view>
			<view class="item" @click="openDetailsSample">
				<view>
					<image :src="buildInfo.imgs[1]" mode="widthFix"></image>
					<view class="item-range">{{buildInfo.model.name}}</view>
				</view>
			</view>
		</view>
		<view class="btn" hover-class="btn-hover" type="default" size="mini" @click="isShowConfirm = true">预约</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buildInfo:{
					area:[],model:[]
				}
			};
		},
		methods: {
			openDetailsSample() {
				uni.navigateTo({
					url: '/pages/index/loupan/details/sample/sample'
				})
			}
		},
		onLoad() {
			this.$http.post("/system/getBuildDetail", {
				"id": 40
			}).then(res => {
				this.buildInfo = res.data.data.buildInfo
			})
		},
	};
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

		.header-title {
			margin-left: 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
		}

		.header {
			margin-top: 46rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}

		.share-image {
			width: 40rpx;
		}

		.info-item {
			margin-top: 20rpx;

			.info-item-name {
				font-size: 24rpx;
				margin-left: 40rpx;
			}

			.info-item-value {
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 60rpx;
			}
		}

		.list {
			margin-top: 20rpx;
			padding: 0 40rpx;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 22rpx;

			.item {
				border-radius: 12rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

				.item-range::before {
					content: '— ';
					color: #3d9c36;
				}

				.item-range::after {
					content: ' —';
					color: #3d9c36;
				}

				.item-range {
					text-align: center;
					font-size: 24rpx;
				}
			}
		}

		.map-container {
			padding: 20rpx 40rpx 0rpx 40rpx;
		}

		map {
			width: 100%;
		}
	}
</style>
